import React from "react";
import { connect } from "react-redux";
import {
  decrementCounter,
  incrementCounter,
} from "../redux/actions/counterActions";
import { Creators as ArticleCreators } from "redux/actions/article";
import { END } from "redux-saga";
import LoginModel from "pages-components/loginModal";
import SignUpModel from "pages-components/signupModal";

class App extends React.Component {
  static async getInitialProps({ store }) {
    store.dispatch(ArticleCreators.getListRequest({ page: 1, limit: 5 }));
    store.dispatch(END);
    await store.sagaTask.toPromise();
  }

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <button onClick={this.props.incrementCounter}>Increment</button>
        <button onClick={this.props.decrementCounter}>Decrement</button>
        <h1>{this.props.counter}</h1>
        {console.log("this.props.articleList====>", this.props.articleList)}
        {this.props.articleList?.article_list?.map((value) => (
          <p key={value.aid}>title:{value.title}</p>
        ))}
        <LoginModel />
        <SignUpModel />
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  counter: state.counter.value,
  articleList: state.articleList.articleList.data,
});

const mapDispatchToProps = {
  incrementCounter: incrementCounter,
  decrementCounter: decrementCounter,
};
export default connect(mapStateToProps, mapDispatchToProps)(App);
